<template>
  <div class="goodsList">
    <div class="adds">
      <b class="button-n" @click="addGoods">添加商品</b>
    </div>
    <noCont v-if="isEmpty"></noCont>
    <div class="tables contentWrap" v-if="!isEmpty">
      <div class="table">
        <el-table :data="tableData" size="small" stripe border>
          <el-table-column prop="name" label="主图">
          </el-table-column>
          <el-table-column prop="name" label="商品名">
          </el-table-column>
          <el-table-column prop="name" label="商品编码">
            <template slot-scope="scope">
              <span>UN1151515454145154</span>
              <b class="button-s" @click="copy(scope.row)">复制</b>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品价格">
          </el-table-column>
          <el-table-column prop="name" label="所属客户">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <b class="button-text operateBtn" @click="deleGoods(scope.row)">删除</b>
              <b class="button-text operateBtn" @click="toEditGoods(scope.row)">编辑</b>
              <b class="button-text operateBtn">下架</b>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizeArray" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
// import { pageCommon } from '@mixin/pageCommon'
import NoCont from '@base/noCont'
Vue.use(VueClipboard)
export default {
  name: 'goodsList',
  components: {
    NoCont
  },
  data () {
    return {
      apiUrl: '/order/search/getPackageListForPlatform',
      tableData: [{
        name: '大厦大啥大大厦大'
      }]
    }
  },
  methods: {
    setList (data) {
      this.tableData = data
    },
    copy (row) { // 复制商品编码
      this.$copyText('acbfff').then((e) => {
        this.$message({
          message: '复制成功!',
          type: 'success'
        })
      })
    },
    addGoods () { // 点击添加商品
      this.$routerTo('editGoods')
    },
    deleGoods (row) { // 删除商品
      this.$confirm('此操作将删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    toEditGoods (row) { // 编辑商品
      this.$routerTo('editGoods', { goodsId: '123456' })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.goodsList
  .adds
    text-align right
    margin-bottom 20px
  .button-s
    margin 0 0 0 10px
  .operateBtn
    display inline-block
</style>
